<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>/home/zjh/git/Koala-UI/KoalaUI/WebContent/lib/Koala_RichTextEditor.js</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
    <link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
    <script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">

<div id="doc">
    <div id="hd" class="yui3-g header">
        <div class="yui3-u-3-4">
            
                <h1><img src="../assets/css/logo.png" title=""></h1>
            
        </div>
        <div class="yui3-u-1-4 version">
            <em>API Docs for: </em>
        </div>
    </div>
    <div id="bd" class="yui3-g">

        <div class="yui3-u-1-4">
            <div id="docs-sidebar" class="sidebar apidocs">
                <div id="api-list">
    <h2 class="off-left">APIs</h2>
    <div id="api-tabview" class="tabview">
        <ul class="tabs">
            <li><a href="#api-classes">Classes</a></li>
            <li><a href="#api-modules">Modules</a></li>
        </ul>

        <div id="api-tabview-filter">
            <input type="search" id="api-filter" placeholder="Type to filter APIs">
        </div>

        <div id="api-tabview-panel">
            <ul id="api-classes" class="apis classes">
            
                <li><a href="../classes/Accordion.html">Accordion</a></li>
            
                <li><a href="../classes/AutoComplete.html">AutoComplete</a></li>
            
                <li><a href="../classes/Button.html">Button</a></li>
            
                <li><a href="../classes/Carousel.html">Carousel</a></li>
            
                <li><a href="../classes/ColorPicker.html">ColorPicker</a></li>
            
                <li><a href="../classes/Combobox.html">Combobox</a></li>
            
                <li><a href="../classes/DateTimePicker.html">DateTimePicker</a></li>
            
                <li><a href="../classes/Grid.html">Grid</a></li>
            
                <li><a href="../classes/ListView.html">ListView</a></li>
            
                <li><a href="../classes/Popover.html">Popover</a></li>
            
                <li><a href="../classes/ProgressBar.html">ProgressBar</a></li>
            
                <li><a href="../classes/RichTextEditor.html">RichTextEditor</a></li>
            
                <li><a href="../classes/ScrollSpy.html">ScrollSpy</a></li>
            
                <li><a href="../classes/Select.html">Select</a></li>
            
                <li><a href="../classes/SideBar.html">SideBar</a></li>
            
                <li><a href="../classes/Slider.html">Slider</a></li>
            
                <li><a href="../classes/Spinner.html">Spinner</a></li>
            
                <li><a href="../classes/Tab.html">Tab</a></li>
            
                <li><a href="../classes/ToolBar.html">ToolBar</a></li>
            
                <li><a href="../classes/Tooltip.html">Tooltip</a></li>
            
                <li><a href="../classes/Tree.html">Tree</a></li>
            
                <li><a href="../classes/Wizard.html">Wizard</a></li>
            
            </ul>

            <ul id="api-modules" class="apis modules">
            
            </ul>
        </div>
    </div>
</div>

            </div>
        </div>
        <div class="yui3-u-3-4">
                <div id="api-options">
        Show:
        <label for="api-show-inherited">
            <input type="checkbox" id="api-show-inherited" checked>
            Inherited
        </label>

        <label for="api-show-protected">
            <input type="checkbox" id="api-show-protected">
            Protected
        </label>

        <label for="api-show-private">
            <input type="checkbox" id="api-show-private">
            Private
        </label>
        <label for="api-show-deprecated">
            <input type="checkbox" id="api-show-deprecated">
            Deprecated
        </label>

    </div>


            <div class="apidocs">
                <div id="docs-main">
                    <div class="content">
                        <h1 class="file-heading">File: /home/zjh/git/Koala-UI/KoalaUI/WebContent/lib/Koala_RichTextEditor.js</h1>

<div class="file">
    <pre class="code prettyprint linenums">
/**
 * @author zjh
 */
+function ($) {
	//局部变量列表
	var fontNames = [];				//字体名称数组
	var fontSizes = [];				//字体大小数组
	var fontCtrls = [];				//字体控制数组
	var listCtrls = [];				//生成列表数组
	var justfyCtrls = [];			//生成对齐数组
	var redoCtrls = [];				//撤销重做控制
	var $toolBar = null;			//工具栏jQuery
	var that = null;				//this的替代
	/**
	 * 富文本编辑器
	 * @class RichTextEditor
	 * @constructor
	 * @example
	 * 	js代码
	 * 	$(function(){
			$(&quot;#editor&quot;).richtexteditor({
				showJustfyCtrls:false,
				showRedoCtrls:false,
			});
		});
	 
	 * @example
	 *	html代码
	 *	&lt;div contenteditable=&quot;true&quot; id=&quot;editor&quot;&gt;&lt;/div&gt;
	 */
	var RichTextEditor = function (element, options) {
		//4
		this.$element = $(element);
		this.options = $.extend({}, $.fn.richtexteditor.defaults, options);
		that = this;
		//初始化
		this.init(this.$element, this.options);
		//事件列表
		this.$element.parent().children(&quot;div[data-target]&quot;).on(&#x27;click&#x27;,&quot;a[data-edit]&quot;, $.proxy( function(ev) { this.exec(ev.currentTarget); } ,this));
	};
	
	//原型定义，定义构造函数和其他方法
	RichTextEditor.prototype = {
		/**
		 * @constructor
		 */
		constructor:RichTextEditor,
		//初始化
		init:function($element,options){
			//初始化工具栏$
			$toolBar = $(&quot;&lt;div data-target=&#x27;#&quot; + $element.attr(&quot;id&quot;) + &quot;&#x27; data-role=&#x27;editor-toolbar&#x27; class=&#x27;btn-toolbar&#x27;&gt;&lt;/div&gt;&quot;);
			
			//初始化工具栏各种数据
			if(that.options.showFontNames){
				fontNames = [{&quot;name&quot;:&quot;SimSun&quot;,&quot;title&quot;:&quot;宋体&quot;},
				             {&quot;name&quot;:&quot;FangSong_GB2312&quot;,&quot;title&quot;:&quot;仿宋体&quot;},
				             {&quot;name&quot;:&quot;SimHei&quot;,&quot;title&quot;:&quot;黑体&quot;},
				             {&quot;name&quot;:&quot;KaiTi_GB2312&quot;,&quot;title&quot;:&quot;楷体&quot;},
				             {&quot;name&quot;:&quot;Microsoft YaHei&quot;,&quot;title&quot;:&quot;微软雅黑&quot;},
				             {&quot;name&quot;:&quot;幼圆&quot;,&quot;title&quot;:&quot;幼圆&quot;},
				             {&quot;name&quot;:&quot;Times&quot;,&quot;title&quot;:&quot;Times&quot;},
				             {&quot;name&quot;:&quot;Times New Roman&quot;,&quot;title&quot;:&quot;Times New Roman&quot;},
				             {&quot;name&quot;:&quot;Verdana&quot;,&quot;title&quot;:&quot;Verdana&quot;}];
			}
			
			if(that.options.showFontSizes){
				fontSizes = [7,6,5,4,3,2,1];
			}
			
			if(that.options.showFontCtrls){
				fontCtrls = [{&quot;name&quot;:&quot;bold&quot;,&quot;title&quot;:&quot;加粗&quot;},
				             {&quot;name&quot;:&quot;italic&quot;,&quot;title&quot;:&quot;倾斜&quot;},
				             {&quot;name&quot;:&quot;strikethrough&quot;,&quot;title&quot;:&quot;删除线&quot;},
				             {&quot;name&quot;:&quot;underline&quot;,&quot;title&quot;:&quot;下划线&quot;}];
			}
			
			if(that.options.showListCtrls){
				listCtrls = [{&quot;name&quot;:&quot;insertunorderedlist&quot;,&quot;title&quot;:&quot;插入无序列表&quot;,&quot;icon&quot;:&quot;list-ul&quot;},
				             {&quot;name&quot;:&quot;insertorderedlist&quot;,&quot;title&quot;:&quot;插入有序列表&quot;,&quot;icon&quot;:&quot;list-ol&quot;},
				             {&quot;name&quot;:&quot;outdent&quot;,&quot;title&quot;:&quot;减少缩进&quot;,&quot;icon&quot;:&quot;indent-left&quot;},
				             {&quot;name&quot;:&quot;indent&quot;,&quot;title&quot;:&quot;增加缩进&quot;,&quot;icon&quot;:&quot;indent-right&quot;}];
			}
			
			if(that.options.showJustfyCtrls){
				justfyCtrls = [{&quot;name&quot;:&quot;justifyleft&quot;,&quot;title&quot;:&quot;向左对齐&quot;,&quot;icon&quot;:&quot;align-left&quot;},
					             {&quot;name&quot;:&quot;justifycenter&quot;,&quot;title&quot;:&quot;置中对齐&quot;,&quot;icon&quot;:&quot;align-center&quot;},
					             {&quot;name&quot;:&quot;justifyright&quot;,&quot;title&quot;:&quot;向右对齐&quot;,&quot;icon&quot;:&quot;align-right&quot;},
					             {&quot;name&quot;:&quot;justifyfull&quot;,&quot;title&quot;:&quot;全对齐&quot;,&quot;icon&quot;:&quot;align-justify&quot;}];
			}
			
			if(that.options.showRedoCtrls){
				redoCtrls = [{&quot;name&quot;:&quot;undo&quot;,&quot;title&quot;:&quot;撤销&quot;,&quot;icon&quot;:&quot;undo&quot;},
				             {&quot;name&quot;:&quot;redo&quot;,&quot;title&quot;:&quot;重做&quot;,&quot;icon&quot;:&quot;repeat&quot;}];
			}
			
			this._createFontNames();
			this._createFontSizes();
			this._createFontCtrls();
			this._createListCtrls();
			this._createJustifyCtrls();
			this._createRedoCtrls();
			
			//插入工具栏到富文本编辑框前面
			$toolBar.insertBefore($element);
		},
		//执行命令
		exec:function(el){
			var $el = $(el); 
			//这里需要定位出editor
			var value = $el.attr(&quot;data-edit&quot;);
			var spaceIdx = value.indexOf(&quot; &quot;); 
			var command = &quot;&quot;;
			var params = &quot;&quot;;
			if(spaceIdx&gt;=0){
				command = value.substring(0,spaceIdx);
				params = value.substring(spaceIdx+1)||&quot;&quot;;
			}else{
				command = value;
				params = &quot;&quot;;
			}
			
			//console.info(value);
			document.execCommand(command,false,params);
		},
		//创建字体名称
		_createFontNames:function(){
			var $group = $(&quot;&lt;div&gt;&lt;/div&gt;&quot;).addClass(&quot;btn-group&quot;);
			var $icon = $(&#x27;&lt;a title=&quot;字体&quot; data-toggle=&quot;dropdown&quot; class=&quot;btn btn-default dropdown-toggle&quot;&gt;&lt;i class=&quot;icon-font&quot;&gt;&lt;/i&gt;&lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;&lt;/a&gt;&#x27;);
			var $ul = $(&quot;&lt;ul&gt;&lt;/ul&gt;&quot;).addClass(&quot;dropdown-menu&quot;);
			
			for ( var i=0;i&lt;fontNames.length;i++) {
				var fontName = fontNames[i];
				var $li = $(&quot;&lt;li&gt;&lt;/li&gt;&quot;);
				var $a = $(&quot;&lt;a data-edit=&#x27;fontName &quot; + fontName.name + &quot;&#x27;&gt;&lt;/a&gt;&quot;);
				$a.text(fontName.title);
				$a.css({
					&quot;font-family&quot;:fontName.name
				});
				$li.append($a).appendTo($ul);
			}
			$group.append($icon).append($ul);
			//插入到工具栏里
			$group.appendTo($toolBar);
		},
		//创建字体大小
		_createFontSizes:function(){
			var $group = $(&quot;&lt;div&gt;&lt;/div&gt;&quot;).addClass(&quot;btn-group&quot;);
			var $icon = $(&#x27;&lt;a title=&quot;字体大小&quot; data-toggle=&quot;dropdown&quot; class=&quot;btn btn-default dropdown-toggle&quot;&gt;&lt;i class=&quot;icon-text-height&quot;&gt;&lt;/i&gt;&lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;&lt;/a&gt;&#x27;);
			var $ul = $(&quot;&lt;ul&gt;&lt;/ul&gt;&quot;).addClass(&quot;dropdown-menu&quot;);
			
			for(var i=0;i&lt;fontSizes.length;i++){
				var fontSize = fontSizes[i];
				var $li = $(&quot;&lt;li&gt;&lt;/li&gt;&quot;);
				var $a = $(&quot;&lt;a data-edit=&#x27;fontSize &quot; + fontSize + &quot;&#x27;&gt;&lt;font size=&#x27;&quot; + fontSize + &quot;&#x27;&gt;&quot; + fontSize + &quot;号字体&lt;/font&gt;&lt;/a&gt;&quot;);
				$li.append($a).appendTo($ul);
			}
			$group.append($icon).append($ul);
			//插入到工具栏里
			$group.appendTo($toolBar);
		},
		//创建文字控制
		_createFontCtrls:function(){
			var $group = $(&quot;&lt;div&gt;&lt;/div&gt;&quot;).addClass(&quot;btn-group&quot;);
			for(var i=0;i&lt;fontCtrls.length;i++){
				var fontCtrl = fontCtrls[i];
				var $a = $(&quot;&lt;a title=&#x27;&quot; + fontCtrl.title + &quot;&#x27; data-edit=&#x27;&quot; + fontCtrl.name + 
						&quot;&#x27; class=&#x27;btn btn-default&#x27;&gt;&lt;i class=&#x27;icon-&quot; + fontCtrl.name + &quot;&#x27;&gt;&lt;/i&gt;&lt;/a&gt;&quot;);
				$group.append($a);
			}
			//插入到工具栏里
			$group.appendTo($toolBar);
		},
		//创建列表控制
		_createListCtrls:function(){
			this._createToolBar(listCtrls);
		},
		//创建对齐控制
		_createJustifyCtrls:function(){
			this._createToolBar(justfyCtrls);
		},
		//创建撤销/重做控制
		_createRedoCtrls:function(){
			this._createToolBar(redoCtrls);
		},
		//公共方法，基于工具栏生成dom，用数组作为参数
		_createToolBar:function(ctrls){
			var $group = $(&quot;&lt;div&gt;&lt;/div&gt;&quot;).addClass(&quot;btn-group&quot;);
			for(var i=0;i&lt;ctrls.length;i++){
				var ctrl = ctrls[i];
				var $a = $(&quot;&lt;a title=&#x27;&quot; + ctrl.title + &quot;&#x27; data-edit=&#x27;&quot; + ctrl.name + 
						&quot;&#x27; class=&#x27;btn btn-default&#x27;&gt;&lt;i class=&#x27;icon-&quot; + ctrl.icon + &quot;&#x27;&gt;&lt;/i&gt;&lt;/a&gt;&quot;);
				$group.append($a);
			}
			//插入到工具栏里
			$group.appendTo($toolBar);
		}
	};
	
	//加入到jQuery插件
	$.fn.richeditor = function(option,value){
		//3
		var methodReturn;

		var $set = this.each(function () {
			var $this = $(this);
			var data = $this.data(&#x27;richeditor&#x27;);
			var options = typeof option === &#x27;object&#x27; &amp;&amp; option;

			if (!data) $this.data(&#x27;richeditor&#x27;, (data = new RichEditor(this, options)));
			if (typeof option === &#x27;string&#x27;) methodReturn = data[option](value);
		});

		return (methodReturn === undefined) ? $set : methodReturn;
	};
	
	//加入到jQuery插件
	$.fn.richtexteditor = function(option,value){
		//3
		var methodReturn;

		var $set = this.each(function () {
			var $this = $(this);
			var data = $this.data(&#x27;richtexteditor&#x27;);
			var options = typeof option === &#x27;object&#x27; &amp;&amp; option;

			if (!data) $this.data(&#x27;richtexteditor&#x27;, (data = new RichTextEditor(this, options)));
			if (typeof option === &#x27;string&#x27;) methodReturn = data[option](value);
		});

		return (methodReturn === undefined) ? $set : methodReturn;
	};
	
	//默认属性列表
	$.fn.richtexteditor.defaults = {
		/**
		 * 是否显示字体名称选择项
		 * @property showFontNames
		 * @type Boolean
		 * @default true
		 */
		showFontNames:true,
		/**
		 * 是否显示字体大小选择项
		 * @property showFontSizes
		 * @type Boolean
		 * @default true
		 */
		showFontSizes:true,
		/**
		 * 是否显示字体控制选择项
		 * @property showFontCtrls
		 * @type Boolean
		 * @default true
		 */
		showFontCtrls:true,
		/**
		 * 是否显示列表控制选择项
		 * @property showListCtrls
		 * @type Boolean
		 * @default true
		 */
		showListCtrls:true,
		/**
		 * 是否显示对齐选择项
		 * @property showJustfyCtrls
		 * @type Boolean
		 * @default true
		 */
		showJustfyCtrls:true,
		/**
		 * 是否显示撤销重做选择项
		 * @property showRedoCtrls
		 * @type Boolean
		 * @default true
		 */
		showRedoCtrls:true,
	};
	
	//插件的构造对象赋值
	$.fn.richtexteditor.Constructor = RichTextEditor;
}(window.jQuery);
    </pre>
</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="../assets/js/yui-prettify.js"></script>
<script src="../assets/../api.js"></script>
<script src="../assets/js/api-filter.js"></script>
<script src="../assets/js/api-list.js"></script>
<script src="../assets/js/api-search.js"></script>
<script src="../assets/js/apidocs.js"></script>
</body>
</html>
